<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Warrior">
    <title>轮播图</title>
    <script src="./js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" type="" href="./css/bootstrap.min.css">
    <style>
        #ms_rt_slideBox {
            width: 180px;
            height: 225px;
            position: relative;
        }

        .ms_rt_imgBox {
            width: 180px;
            height: 225px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #ms_rt_slideBox>.ms_rt_imgBox>img {
            width: 180px;
            height: 225px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .show {
            display: inline-block;
        }

        .ms_rt_indicators {
            position: absolute;
            left: 75px;
            bottom: 10px;
        }

        .ms_rt_indicators>span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
        }

        .ms_rt_indicators>span.current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="ms_rt_slideBox">
        <div class="ms_rt_imgBox">
            <img src="./img/ms-rt.jpg" alt="" class="show">
            <img src="./img/ms_r2.jpg" alt="">
        </div>
        <div class="ms_rt_indicators">
            <span class="current"></span>
            <span></span>
        </div>
    </div>
    <script>
        var ms_rt_index = 0;
        var ms_rt_timer = setInterval(ms_rt_changeIndex, 2000);

        function ms_rt_changeIndex() {
            ms_rt_index = ms_rt_index >= $('.ms_rt_imgBox>img').length - 1 ? 0 : ms_rt_index + 1;
            ms_rt_changeImage();
        }

        function ms_rt_changeImage() {
            $('.ms_rt_imgBox>img').eq(ms_rt_index).fadeIn('fast').siblings().fadeOut('fast');
            $('.ms_rt_indicators>span').eq(ms_rt_index).addClass('current').siblings().removeClass('current');
        }

        $('.ms_rt_indicators>span').hover(function(){
            clearInterval(ms_rt_timer);
            ms_rt_index = $(this).index();
            ms_rt_changeImage();
        },function(){
            ms_rt_timer = setInterval(ms_rt_changeIndex,2000);
        })
    </script>
</body>

</html>